<template>
	<div id="risk-ability">
		<div v-show="module==0">
			<div class="explainContainer">
				<img src="../../../assets/images/questionMark_2x.png" class="explain" @click="showModal">
			</div>
			<div class="charts">
				<div ref="myChart1" style="width:auto; height:1.4rem;"></div>
				<div class="titleContainer">
					<div class="title">风险收益</div>
				</div>
				<div class="description">本月内，您的风险收益能力为<span :class="scoreColor" v-text="message.riskAbility"></span>％</div>
			</div>
			<div class="charts">
				<div ref="myChart2" style="width:auto; height:1.4rem;"></div>
				<div class="titleContainer">
					<div class="title">收益波动率</div>
				</div>
				<div class="description">本月内，您的收益波动率<span :class="waveColor" v-text="message.profitWave"></span>%</div>
				<div class="trophy">
					<img src="../../../assets/images/trophy2x.png">
					<div>本月，您的风险控制得分为<span class="text-red" v-text="message.score"></span>分</div>
				</div>
				<div class="star">
					<img src="../../../assets/images/star.png">
					<span>{{evaluation}}</span>
					<img src="../../../assets/images/star.png">
				</div>
			</div>
		</div>
		<return-error v-show="module==1"></return-error>
		<return-empty v-show="module==2"></return-empty>
		<div class="modal" v-show="activeModal">
			<div class="modal-dialog">
				<div class="modal-title">
					<div class="title-text">
						风险控制说明
						<img src="../../../assets/images/close.png" @click="closeModal">
					</div>
				</div>
				<div class="modal-content">
					<div class="content-title">风险控制：</div>
					<div class="content-text">风险收益比率越高，说明单位风险带来的回报越多；收益波动率越低，说明收益越稳定。（数值仅供参考）</div>
				</div>
				<div class="modal-btn" @click="closeModal">我知道了</div>
			</div>
		</div>
	</div>
</template>
<script>
	import echarts from 'echarts/lib/echarts'
	import 'echarts/lib/chart/gauge'
	import RemoteDAO from '@/common/remoteDAO'

	const option={
		series: [
	        {
	            name: '业务指标',
	            type: 'gauge',
	            radius:'100%',
	            splitNumber:10,
	            splitLine:{
	                show:false,
	                length:0
	            },
	            axisLine:{
	                show:false,
	                lineStyle:{
	                    color:[[0.2, '#69c1fd'], [0.8, '#ffa53e'], [1, '#ed3908']],
	                    width:5
	                }
	            },
	            axisTick:{
	                show:false
	            },
	            axisLabel:{
	            	show:true,
	            	distance:10
	            },
	            pointer:{
	              length:'50%',
	              width:10
	            },
	            detail: {show:false}
	        }
	    ]
	}

	let dataOption1={
		series:[
			{
				data:[{value:0}]
			}
		]
	}

	let dataOption2={
		series:[
			{
				data:[{value:0}]
			}
		]
	}

	export default{
		props:['time'],
		data () {
			return {
				module:0,
				myChart1:null,
				myChart2:null,
				activeModal:false,
				message:{
					riskAbility:null,
					score:null,
					profitWave:null
				}
			}
		},
		computed:{
			scoreColor(){
				if(this.message.score<20){
					return 'text-blue';
				}
				else if(this.message.score<80){
					return 'text-orange';
				}
				else{
					return 'text-red';
				}
			},
			waveColor(){
				if(this.message.profitWave<20){
					return 'text-blue';
				}
				else if(this.message.profitWave<80){
					return 'text-orange';
				}
				else{
					return 'text-red';
				}
			},
			evaluation(){
				if(this.message.score<60){
					return '风险控制能力还有很大进步空间呢！';
				}
				else if(this.message.score<80){
					return '风险控制能力表现良好，还需努力呀！';
				}
				else{
					return '风险控制能力优异，做的不错哦！';
				}
			}
		},
		mounted () {
			this.myChart1=echarts.init(this.$refs.myChart1)
			this.myChart2=echarts.init(this.$refs.myChart2)

			this.myChart1.setOption(option)
			this.myChart2.setOption(option)

			this.initEvent()
		},
		beforeDestroy(){
			echarts.dispose(this.myChart1);
			echarts.dispose(this.myChart2);
		},
		watch:{
			time:function(){
				this.initEvent();
			}
		},
		methods:{
			graph(){
				this.myChart1.setOption(dataOption1);
				this.myChart2.setOption(dataOption2);
			},
			initEvent(){
				this.module=0
				var self=this;
				var obj={"pagenum": "30","recent": this.time};
				RemoteDAO.callZL13100025(obj,self.ZL13100025);
			},
			ZL13100025(result){
				if(result.error=='1'){
					this.module=1
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.module=2
					}
					else{
						let source=specData[0]._source;
						dataOption1.series[0].data[0].value=source.sharpe_rate;
						this.message.riskAbility=source.sharpe_rate;
						this.message.score=source.risk_index;
						dataOption2.series[0].data[0].value=source.profit_wave_rate;
						this.message.profitWave=source.profit_wave_rate.toFixed(2);

						this.graph();
					}
				}
			},
			showModal(){
				this.activeModal=true
			},
			closeModal(){
				this.activeModal=false
			}
		}
	}
</script>
<style scoped>
	#risk-ability{
		color: #999;
		margin-bottom: 0.25rem;
		position: relative;
	}
	.titleContainer{
		margin-top: 0.1rem;
		height: 0.25rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title{
		height: 0.25rem;
		padding: 0.065rem 0.19rem;
		box-sizing: border-box;
		background: #2eabff;
		font-size: 0.12rem;
		line-height: 0.12rem;
		color: #fff;
		border-radius: 0.125rem;
	}
	.description{
		margin-top: 0.2rem;
		text-align: center;
		height: 0.19rem;
		font-size: 0.14rem;
	}
	.detail{
		margin-top: 0.1rem;
		color:#ffa53e;
		font-size: 0.22rem;
		height: 0.25rem;
		text-align: center;
	}
	.trophy{
		margin-top: 0.25rem;
		height: 0.2rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.trophy img{
		height: 0.2rem;
	}
	.trophy div{
		margin-left: 0.1rem;
		font-size: 0.14rem;
	}
	.rateDetail{
		margin-top: 0.1rem;
		color:#6cc4ff;
		font-size: 0.22rem;
		height: 0.25rem;
		text-align: center;
	}
	.star{
		margin-top: 0.1rem;
		height: 0.1rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.star img{
		height: 0.1rem;
	}
	.star span{
		font-size: 0.1rem;
		margin: 0 0.05rem;
	}
	.charts{
		margin: 0.3rem 0 0.1rem 0;
	}
	.textRed{
		color: #e31a2e;
	}
	.text-orange{
		color: #ffa53e;
	}
	.text-blue{
		color: #69c1fd;
	}
	.text-red{
		color: #e31a2e;
	}
	.explainContainer{
		position: absolute;
		top: 0;
		right: 0.1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
	.explain{
		height: 0.14rem;
	}
	.modal{
		width: 100%;
		height: 9rem;
		position: fixed;
		top: 0;
		z-index: 999999999;
		background: rgba(0,0,0,0.6);
	}
	.modal-dialog{
		width: 3rem;
		height: 2.3rem;
		background: #fff;
		border-radius: 0.06rem;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.modal-title{
		width: 100%;
		height: 0.45rem;
		padding: 0 0.15rem;
		box-sizing: border-box;
	}
	.title-text{
		width: 100%;
		height: 100%;
		border-bottom: 1px solid #ddd;
		font-size: 0.16rem;
		color: #808080;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title-text img{
		height: 0.15rem;
	}
	.modal-content{
		width: 100%;
		height: 1.35rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	.content-title{
		width: 100%;
		height: 0.4rem;
		font-size: 0.15rem;
		color: #555;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.content-text{
		width: 100%;
		font-size: 0.14rem;
		color: #555;
	}
	.modal-btn{
		width: 100%;
		height: 0.5rem;
		border-top: 1px solid #ddd;
		font-size: 0.15rem;
		color: #369fea;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
